<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../dist/tailwind.css">
    <style>
        .bg-stripes-fuchsia-500 {
            --stripes-color: rgba(217, 70, 239, 0.4);
        }

        .bg-stripes {
            background-image: linear-gradient(45deg, var(--stripes-color) 12.5%, transparent 12.5%, transparent 50%, var(--stripes-color) 50%, var(--stripes-color) 62.5%, transparent 62.5%, transparent 100%);
            background-size: 5.66px 5.66px;
        }
    </style>
</head>

<body class=" bg-green-400">

    <form action="http://127.0.0.1:5500/_vue/12-apollo%E6%A8%A1%E4%BB%BF%E9%A1%B9%E7%9B%AE/src/page/index.html" method="GET">
        <div class="w-full sm:w-4/5 md:w-140 bg-white h-auto mx-auto mt-24 p-8 rounded-lg flex flex-col space-y-3">
            <div class="w-full h-32 bg-stripes-fuchsia-500 bg-stripes"></div>
            <input value="" class="w-full h-11 border-b-2 outline-none text-gray-400" type="text"
                placeholder="Username">
            <input value="" class="w-full h-11 border-b-2 outline-none text-gray-400" type="password"
                placeholder="Password">
            <button class="bg-gray-200 h-11 rounded-sm hover:bg-gray-700 hover:text-white" type="submit">登录</button>
        </div>
    </form>

    <script src=""></script>
</body>

</html>